---
title: Mises en page
description: Une introduction aux mises en page dans Astro.
i18nReady: true
---

import ReadMore from '~/components/ReadMore.astro'

Les **mises en page** sont des [composants Astro](/fr/basics/astro-components/) utilisés pour fournir une structure d'interface utilisateur réutilisable, comme un modèle de page.

Par convention, nous utilisons le terme « mise en page » pour les composants Astro qui fournissent des éléments d'interface utilisateur communs à toutes les pages, tels que les en-têtes, les barres de navigation et les pieds de page. Un composant Astro de mise en page typique fournit [aux pages Astro, Markdown ou MDX](/fr/basics/astro-pages/) les éléments suivants :
- une **enveloppe de page** (balises `<html>`, `<head>` et `<body>`)
- un [**`<slot />`**](/fr/basics/astro-components/#les-slots) pour spécifier où le contenu de chaque page doit être injecté.

Mais, un composant de mise en page n'a rien de spécial ! Ils peuvent [accepter des props](/fr/basics/astro-components/#props-de-composant) et [importer et utiliser d'autres composants](/fr/basics/astro-components/#structure-du-composant) comme n'importe quel autre composant Astro. Ils peuvent inclure [des composants de frameworks d'interface utilisateur](/fr/guides/framework-components/) et [des scripts côté client](/fr/guides/client-side-scripts/). Ils ne sont même pas obligés de fournir une enveloppe de page complète, et peuvent plutôt être utilisés comme des modèles d'interface utilisateur partiels.

Cependant, si un composant de mise en page contient une enveloppe de page, son élément `<html>` doit être le parent de tous les autres éléments du composant.

Les composants de mise en page sont généralement placés dans un dossier `src/layouts` dans votre projet pour l'organisation, mais ce n'est pas une obligation ; vous pouvez choisir de les placer n'importe où dans votre projet. Vous pouvez même placer des composants de mise en page à côté de vos pages en [préfixant les noms de mise en page par `_`](/fr/guides/routing/#exclure-des-pages).

## Exemple de composant de mise en page

```astro "<slot />" 
---
// src/layouts/MySiteLayout.astro
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
const { title } = Astro.props;
---
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <BaseHead title={title}/>
  </head>
  <body>
    <nav>
      <a href="#">Accueil</a>
      <a href="#">Articles</a>
      <a href="#">Contact</a>
    </nav>
    <h1>{title}</h1>
    <article>
      <slot /> <!-- Votre contenu est injecté ici -->
    </article>
    <Footer />
  </body>
  <style>
    h1 {
      font-size: 2rem;
    }
  </style>
</html>
```

```astro title="src/pages/index.astro"
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout title="Page d'accueil">
  <p>Le contenu de ma page, enveloppé dans un composant de mise en page !</p>
</MySiteLayout>
```

<ReadMore>Apprenez-en plus sur [les slots](/fr/basics/astro-components/#les-slots).</ReadMore>

## Utiliser TypeScript avec des mises en page

Toute mise en page Astro peut être modifiée pour introduire la sûreté du typage et l'autocomplétion en fournissant les types de vos props :

```astro ins={2-7} title="src/components/MyLayout.astro"
---
interface Props { 
  title: string;
  description: string;
  publishDate: string;
  viewCount: number;
}
const { title, description, publishDate, viewCount } = Astro.props;
---
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content={description}>
    <title>{title}</title>
  </head>
  <body>
    <header>
      <p>Publié le {publishDate}</p>
      <p>Vu par {viewCount} personnes</p>
    </header>
    <main>
      <slot />
    </main>
  </body>
</html>
```

## Mises en page Markdown

Les mises en page sont particulièrement utiles pour les pages Markdown individuelles qui, autrement, n'auraient pas de formatage de page.

Astro fournit une propriété de frontmatter spéciale nommée `layout` et destinée aux [fichiers `.md` individuels situés dans `src/pages/` et reposant sur le routage basé sur les fichiers](/fr/guides/markdown-content/#pages-markdown-individuelles). Elle vous permet de spécifier quel composant `.astro` utiliser comme mise en page. Ce composant vous permet de fournir du contenu `<head>` comme des balises méta (par exemple `<meta charset="utf-8">`) et des styles pour la page Markdown. Par défaut, ce composant spécifié peut accéder automatiquement aux données du fichier Markdown.

Ceci n'est pas reconnu comme une propriété spéciale lors de l'utilisation des [collections de contenu](/fr/guides/content-collections/) pour interroger et afficher votre contenu.

```markdown title="src/pages/page.md" {2} 
---
layout: ../layouts/BlogPostLayout.astro
title: "Hello, World!"
author: "Matthew Phillips"
date: "09 Aug 2022"
---
Toutes les propriétés du frontmatter sont disponibles comme props pour un composant de mise en page Astro.

La propriété `layout` est la seule propriété spéciale fournie par Astro.

Vous pouvez l'utiliser dans les fichiers Markdown et MDX situés dans `src/pages/`.

```

Une mise en page typique pour les pages Markdown inclut :

1. La propriété `frontmatter` pour accéder au frontmatter et aux autres données de la page Markdown.
2. Un [`<slot />`](/fr/basics/astro-components/#les-slots) par défaut pour indiquer où le contenu Markdown de la page doit être rendu.

```astro title="src/layouts/BlogPostLayout.astro" /(?<!//.*){?frontmatter(?:\\.\w+)?}?/ "<slot />"
---
// 1. La propriété frontmatter vous donne accès au frontmatter et aux autres données
const { frontmatter } = Astro.props;
---
<html>
  <head>
    <!-- Ajoutez d'autres éléments Head ici, comme l'élément styles et les balises meta. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>{frontmatter.title}</title>
  </head>
  <body>
    <!-- Ajoutez d'autres composants d'interface utilisateur ici, comme les en-têtes et les pieds de page communs. --> 
    <h1>{frontmatter.title} by {frontmatter.author}</h1>
    <!-- 2. Le HTML rendu sera passé dans le slot par défaut. -->
    <slot />
    <p>Écrit le : {frontmatter.date}</p>
  </body>
</html>
```

Vous pouvez définir le [type `Props`](/fr/guides/typescript/#les-props-de-composants) d'une mise en page, avec le type utilitaire `MarkdownLayoutProps` :

```astro title="src/layouts/BlogPostLayout.astro" ins={2,4-9}
---
import type { MarkdownLayoutProps } from 'astro';

type Props = MarkdownLayoutProps<{
  // Définissez les props du frontmatter ici
  title: string;
  author: string;
  date: string;
}>;

// Désormais, `frontmatter`, `url` et et les autres propriétés de mise en page Markdown
// sont accessibles avec la sûreté du typage
const { frontmatter, url } = Astro.props;
---
<html>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href={new URL(url, Astro.site).pathname}>
    <title>{frontmatter.title}</title>
  </head>
  <body>
    <h1>{frontmatter.title} par {frontmatter.author}</h1>
    <slot />
    <p>Écrit le : {frontmatter.date}</p>
  </body>
</html>
```

### Props de mise en page Markdown

Une mise en page Markdown aura accès aux informations suivantes via `Astro.props` :

- **`file`** - Le chemin absolu de ce fichier (par exemple : `/home/user/projects/.../file.md`).
- **`url`** - L'URL de cette page (par exemple : `/fr/guides/markdown-content`).
- **`frontmatter`** - Tous les éléments frontmatter du document Markdown ou MDX.
  - **`frontmatter.file`** - Identique à la propriété `file` de premier niveau.
  - **`frontmatter.url`** - Identique à la propriété `url` de premier niveau.
- **`headings`** - Une liste de titre (`h1 -> h6`) dans le document Markdown ou MDX avec les métadonnées associées. Cette liste suit le type : `{ depth: number; slug: string; text: string }[]`.
- **`rawContent()`** - Une fonction qui renvoie le document Markdown brut sous forme de chaine de caractères.
- **`compiledContent()`** - Une fonction asynchrone qui renvoie le document Markdown compilé en tant que chaine de caractères HTML.

:::note
Une mise en page Markdown aura accès à toutes les [propriétés disponibles](/fr/guides/markdown-content/#propriétés-disponibles) du fichier Markdown depuis `Astro.props` **avec deux différences essentielles :**

*   Informations sur l'en-tête (c.-à-d. les éléments `h1 -> h6`) sont disponibles via le tableau `headings`, plutôt qu'une fonction `getHeadings()`.

*   `file` et `url` sont *aussi* disponibles comme propriétés `frontmatter` imbriquées (c.-à-d. `frontmatter.url` et `frontmatter.file`).

:::

### Importation manuelle de mises en page (MDX)

Vous pouvez également utiliser la propriété spéciale `layout` de Markdown dans le frontmatter des fichiers MDX pour transmettre les props `frontmatter` et `headings` directement à un composant de mise en page spécifié de la même manière.

Pour passer à votre mise en page MDX des informations qui n'existent pas (ou ne peuvent pas exister) dans votre frontmatter, vous pouvez importer et utiliser un composant `<Layout />`. Ce composant fonctionne comme n'importe quel autre composant Astro, et ne recevra pas de props automatiquement. Passez-lui directement les props nécessaires :

```mdx title="src/pages/posts/first-post.mdx" ins={6} del={2} /</?BaseLayout>/ /</?BaseLayout title={frontmatter.title} fancyJsHelper={fancyJsHelper}>/
---
layout: ../../layouts/BaseLayout.astro
title: 'Mon premier billet sur le MDX'
publishDate: '21 September 2022'
---
import BaseLayout from '../../layouts/BaseLayout.astro';

export function fancyJsHelper() {
  return "Essayez de faire cela avec YAML !";
}

<BaseLayout title={frontmatter.title} fancyJsHelper={fancyJsHelper}>
  Bienvenue sur mon nouveau blog Astro, utilisant MDX !
</BaseLayout>
```

Ensuite, vos valeurs sont disponibles à travers `Astro.props` dans votre mise en page, et votre contenu MDX va être injecté dans la page où votre composant `<slot />` est écrit : 

```astro title="src/layouts/BaseLayout.astro" /{?title}?/ "fancyJsHelper" "{fancyJsHelper()}"
---
const { title, fancyJsHelper } = Astro.props;
---
<html>
  <head>
    <!-- -->
    <meta charset="utf-8">
  </head>
  <body>
    <!-- -->
    <h1>{title}</h1>
    <slot /> <!-- votre contenu est injecté ici -->
    <p>{fancyJsHelper()}</p>
    <!-- -->
  </body>
</html>
```

Lorsque vous utilisez une mise en page (que ce soit via la propriété `layout` du frontmatter ou en important une mise en page), vous devez inclure la balise `<meta charset="utf-8">` dans votre mise en page car Astro ne l'ajoutera plus automatiquement à votre page MDX.

<ReadMore>Pour en savoir plus sur la prise en charge de Markdown et de MDX par Astro, consultez notre [guide Markdown](/fr/guides/markdown-content/).</ReadMore>

## Imbrication de mises en page

Les composants de mise en page ne doivent pas nécessairement contenir une page entière de code HTML. Vous pouvez diviser vos mises en page en composants plus petits et combiner les composants de mise en page pour créer des modèles de page encore plus flexibles. Ce modèle est utile lorsque vous souhaitez partager du code entre plusieurs mises en page.

Par exemple, un composant de mise en page `BlogPostLayout.astro` pourrait mettre en forme le titre, la date et l'auteur d'un article. Ensuite, un `BaseLayout.astro` au niveau du site pourrait gérer le reste de votre modèle de page, comme la navigation, les pieds de page, les balises méta SEO, les styles globaux et les polices de caractères. Vous pouvez également passer les props reçues de votre article à une autre mise en page, comme n'importe quel autre composant imbriqué.

```astro {3} /</?BaseLayout>/ /</?BaseLayout url={frontmatter.url}>/
---
// src/layouts/BlogPostLayout.astro
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout url={frontmatter.url}>
  <h1>{frontmatter.title}</h1>
  <h2>Auteur de l'article : {frontmatter.author}</h2>
  <slot />
</BaseLayout>
```
